<template>
  <div class="menu-box">
    <router-link to="">
    <a href="<{site_url('/web/category/list')}>" class="footer_want_to_buy">
    <div class="menu-bar col-2 to_buy pos-r">
        <div class="title">我要买</div>
    </div>
    </a>
    <a href="<{site_url('/web/goods/sys_buy_list')}>" class="footer_want_to_sell">
    <div class="menu-bar col-2 to_sell pos-r">
        <div class="title">我要卖</div>
    </div>
    </a>
    <a href="<{site_url('/web/information/get_list')}>?t=2">
    <div class="menu-bar col-2 user_center pos-r">
        <div class="title">权益资讯</div>
    </div>
    </a>
    <a href="<{site_url('/web/card/bill_management')}>">
    <div class="menu-bar col-2 trader_entry pos-r">
        <div class="title">卡包</div>
    </div>
    </a>
    <a href="<{site_url('/web/survey/trader/10')}>?show_type=1">
    <div class="menu-bar col-2 suggest pos-r">
        <div class="title">招商</div>
    </div>
    </a>
    <a href="<{site_url('/web/text/list')}>?category_id=1">
    <div class="menu-bar col-2 question_answer pos-r">
        <div class="title">Q&A</div>
    </div>
    </a>
  </div>
</template>

<script>
export default {
  name: 'MenuBox',
  props: ['menu'],
  data () {
    return {
      menu: [
        {title: '我要买', url: '/applet/category/list'}
      ],
      image: [
        api.baseUrl + '/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg',
        'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'
      ]
    }
  }
}
</script>

<style>

.menu-box {
  padding: 0.14rem;
  font-size: 0;
}
.menu-bar {
  margin: 0.14rem;
  width: 5.76rem;
  height: 2.754rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  box-shadow: 0px 0.03rem 0.16rem 0px #ccc;
  border-radius: 0.16rem;
}
/* .menu-bar.buyer {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/buyer@2x.png');
}
.menu-bar.seller {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/seller@2x.png');
} */

.menu-bar.all_act {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/all_act@2x.png');
}
.menu-bar.daily_act {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/daily_act@2x.png');
}
.menu-bar.new_act {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/new_act@2x.png');
}
.menu-bar.report {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/report@2x.png');
}
.menu-bar.setting {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/setting@2x.png');
}
.menu-bar.subject {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/subject@2x.png');
}
.menu-bar.hot_act {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/hot_act@2x.png');
}
.menu-bar.to_buy {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/buy@2x.png');
}
.menu-bar.to_sell {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/sell@2x.png');
}
.menu-bar.user_center {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/user_center@2x.png');
}
.menu-bar.suggest {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/suggest@2x.png');
}
.menu-bar.recommend {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/recommend@2x.png');
}
.menu-bar.trader_entry {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/trader_entry@2x.png');
}
.menu-bar.question_answer {
  background-image: url('http://www.bettercard.cn/views/default/skin/icons/Q&A@2x.png');
}
.menu-bar.col-2 {
  width: 2.72rem;
  height: 2.72rem;
}
.menu-bar .title {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #333;
  font-size: 0.24rem;
  line-height: 0.8rem;
  /* text-shadow: 0 0 0.04rem #333; */
  font-weight: bold;
  font-family: initial;
  text-align: center;
}
</style>